<template>
  <!--快捷查询-->
  <el-card 
    class="box-card"
    :body-style="{ padding: '7px' }"
  >
    <el-scrollbar style="min-width:500px;">
      <div style="position: absolute;right: 5px; top:5px;z-index: 100;">
        <!--更多查询的按钮-->
        <el-button type="primary" round @click="moreOpen" size="mini">更多</el-button>
      </div>
      <!--快捷查询框-->
      <div class="flex-content" :style="'width: ' + allWidth + 'px;heigth: 50px'">
        <!--快捷查询按钮-->
        <div style="float: left;">
          <el-dropdown size="small">
            <el-button type="primary" size="mini">
              快捷查询
            </el-button>
            <template #dropdown>
              <el-dropdown-menu  size="mini">
                <el-dropdown-item
                  @click="quickClick(0)"
                >
                  快捷查询
                </el-dropdown-item>
                <el-dropdown-item
                  v-for="(item, key, index) in customer"
                  :key="'quick_' + index"
                  @click="quickClick(key)" 
                >
                  {{item.title}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!--快捷查询的字段-->
        <div style="float: left;margin: 5px; border: 1px solid rgb(207, 225, 243); min-height: 33px;"
          v-for="(ctrId, index) in arrQuickFind"
          :style="' width: ' + colWidths[ctrId] + 'px;'"
          :key="'find_quick_' + index + '_' + ctrId"
        >
          <!--查询的子控件，采用动态组件的方式 component-->
          <find-item
            :model="findModel[ctrId]"
            :itemMeta="itemMeta[ctrId]"
          >
          </find-item>
        </div>
      </div>
      
    </el-scrollbar>
    
  </el-card>
  <!--更多查询，放在抽屉里面-->
  <component
    :is="findMoreControl[moreFind]"
    :allFind="allFind"
    :itemMeta="itemMeta"
    :dialogInfo="dialogInfo"
    :findModel="findModel"
  >
  </component>
</template>

<script>
  import { ref, watch, defineComponent, reactive } from 'vue'
  import { ElCard, ElScrollbar, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
  import { DArrowRight } from '@element-plus/icons-vue'
  // 查询控件的属性，创建查询结构
  import { findProps, findController } from '../map'

  // 更多查询条件，弹抽屉
  import findMore from './find-more-div.vue'

  // 查询的子控件的容器
  import findItem from './item/_shell.vue'

  /**
   * @function div 格式的查询控件
   * @description 可以依据 json 动态生成查询控件
   * @returns {*} Vue 组件，查询控件
   */
  export default defineComponent({
    name: 'el-find-div',
    inheritAttrs: false,
    components: {
      ElCard, ElScrollbar, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem,
      DArrowRight, // 箭头图标
      findItem
    },
    props: {
      ...findProps
    },
    setup (props, context) {
      // console.log('查询控件props', props)
      
      const {
        resetForm, // 重置表单
        moreOpen, // 打开更多
        dialogInfo, // 是否显示更多
        findModel, // 内部查询结构
        arrQuickFind, // 快捷查询
        formControl // 获取表单的dom
      } = findController(props)
      
      // 延迟加载更多查询条件
      const findMoreControl = {
        none: '',
        more: findMore // defineAsyncComponent(() => import('./find-more-div.vue'))
      }
      const moreFind = ref('none')
      watch(() => dialogInfo.isShow, () => {
        moreFind.value = 'more'
      })

      // 调整控件占的格数
      const colCounts = reactive({})
      const colWidths = reactive({})
      const allWidth = ref(150)

      watch(arrQuickFind, () => {
        allWidth.value = 200
        arrQuickFind.forEach(id => {
          const count = props.itemMeta[id].colCount
          const type = props.itemMeta[id].controlType
          colCounts[id] = (type === 150 || type === 151) ? 2 : count
          colWidths[id] = 70 + 140 * colCounts[id]
          allWidth.value += colWidths[id]
        })
      }, {immediate: true})

      return {
        allWidth, // 快捷查询的总宽度
        colCounts, // 调整后的查询子控件的份数
        colWidths, // 调整后的查询子控件的宽度
        findMoreControl,
        moreFind,
        resetForm, // 重置表单
        moreOpen, // 打开更多
        dialogInfo, // 是否显示更多
        findModel, // 内部查询结构
        arrQuickFind, // 快捷查询
        formControl // 获取表单的dom
      }
    }
  })
</script>

<style>

</style>
